<template>
  <div style="padding-left: 16px; height: 100%">
    <div class="right-item">
      <span>已选（{{ selectList.length }}）</span>
      <el-button type="text" @click="clearAll"> 清空 </el-button>
    </div>
    <div class="right-item-wrap">
      <div v-for="(item, index) in selectList" :key="item.id" class="right-item">
        <span>{{ item.nickName }}</span>
        <el-button type="text" @click="onRemove(index)">
          <i class="el-icon-close"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Right',
  props: {
    selectList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  methods: {
    clearAll() {
      this.$emit('change', [])
    },
    onRemove(i) {
      let list = JSON.parse(JSON.stringify(this.selectList))
      list.splice(i, 1)
      this.$emit('change', list)
    },
  },
}
</script>
<style lang="scss" scoped>
.right-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.right-item-wrap {
  margin-top: 20px;
  height: calc(100% - 60px);
  padding-right: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
